<template>
  <div class="yunli-container">
    <div class="control-cont">
      <div class="left-cont">
        <i class="icon"></i>
        <div class="left-cont-title">运力分布</div>
      </div>

      <div class="right-cont">
        <span @click="changeTag(1)" class="lf-btn" :class="tag == 1 && 'active'"
          >贸易商</span
        >
        /
        <span
          @click="changeTag(2)"
          class="lf-btn "
          :class="tag == 2 && 'active'"
          >货名</span
        >
        /
        <span
          @click="changeTag(3)"
          class="lf-btn "
          :class="tag == 3 && 'active'"
          >港口</span
        >
      </div>
    </div>
    <div class="body-cont">
      <div class="body-left">
        <CheciChart :chartData="checi" />
      </div>
      <div v-if="tag != 2" class="body-right">
        <div v-if="chartData.length > 2" class="swiper mySwiper" :id="id">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item, index) in chartData"
              :key="index"
            >
              <div class="yunli-chart-cont">
                <div
                  class="yunli-chart-item"
                  v-for="(chart, i) in item"
                  :key="`${index}-${i}`"
                  :class="`yunli-chart-${index}-${i}`"
                ></div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item, index) in chartData"
              :key="index"
              style="width: 50%"
            >
              <div class="yunli-chart-cont">
                <div
                  class="yunli-chart-item"
                  v-for="(chart, i) in item"
                  :key="`${index}-${i}`"
                  :class="`yunli-chart-${index}-${i}`"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="body-right">
        <LineChartYunli id="yunli_lineChart" :chartData="chartData" />
      </div>
    </div>
  </div>
</template>

<script>
import CheciChart from "./CheciChart.vue";
import "swiper/swiper-bundle.min.css";
import Swiper from "swiper/swiper-bundle.min.js";
import generatePieChart from "../../../util/generatePieChart";
import { getTraffic } from "@/api/networShow/dataV";
import LineChartYunli from "../../components/LineChartYunli.vue";
export default {
  components: {
    CheciChart,
    LineChartYunli
  },
  data() {
    return {
      id: "yunliSwiperId",
      tag: 1,
      chartData: [],
      checi: [{ value: 0 }],
      mySwiper: null
    };
  },
  watch: {
    // 轮播数据 发送改变
    chartData: {
      deep: true,
      handler(newVal) {
        if (this.tag == 2) {
          return;
        }
        // 如果数据长度小于等于2 直接渲染图表 如果已生成mySwiper轮播则销毁
        if (newVal.length <= 2) {
          this.$nextTick(() => {
            this.createChart();
          });
          if (this.mySwiper) {
            this.mySwiper.destroy(true, true);
            this.mySwiper = null;
          }
        } else {
          // 数据长度大于4(需要轮播的情况)
          if (this.mySwiper) {
            // 已轮播则更新mySwiper
            this.mySwiper.update();
            // 并将重新渲染图表
            this.createChart();
          } else {
            // 未轮播 进行轮播初始化
            this.$nextTick(() => {
              this.initSwiper();
            });
          }
        }
      }
    }
  },
  methods: {
    changeTag(tag) {
      this.tag = tag;
      this.fetchData();
    },
    initSwiper() {
      const _this = this;
      let swiperOption = {
        // mySwiper配置
        loop: true,
        autoplay: {
          delay: 6000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        slidesPerView: 2,
        spaceBetween: 0,
        observer: true,
        observeParents: false,
        on: {
          init: function() {
            _this.$nextTick(() => {
              // 已完成轮播初始化 动态生成图表
              _this.createChart();
            });
          }
        }
      };
      _this.mySwiper = new Swiper(`#${this.id}`, swiperOption);
    },
    createChart() {
      this.$nextTick(() => {
        const classList = [];
        this.chartData.forEach((item, index) => {
          item.forEach((data, i) => {
            classList.push({
              className: `yunli-chart-${index}-${i}`,
              data
            });
          });
        });
        classList.forEach(node => {
          // 根据dom选择器查找dom节点
          const el = document.getElementsByClassName(node.className);
          const elArr = Array.from(el);
          elArr.forEach(item => {
            // 渲染图表
            generatePieChart(item, node.data);
          });
        });
      });
    },
    fetchData() {
      getTraffic(this.tag).then(res => {
        const { data } = res;
        if (data.code == 200) {
          let list = data.data.list;
          this.checi = [{ value: data.data.traffic }];
          if (this.tag != 2) {
            const chartData = [];
            if (this.tag == 1) {
              list = list.filter(item => item.title.trim() !== "");
            }
            list.forEach((item, index) => {
              if (index % 2 == 0) {
                chartData.push([]);
              }
              const len = chartData.length;
              chartData[len - 1].push(item);
            });
            this.chartData = chartData;
          } else {
            if (list.length < 10) {
              this.chartData = Array(10)
                .fill(list)
                .flat();
            } else {
              this.chartData = list;
            }
          }
        }
      });
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

<style lang="less" scoped>
.yunli-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(16, 35, 93, 0.45);
  .control-cont {
    display: flex;
    align-items: center;
    height: 31px;
    justify-content: space-between;
    background: rgba(28, 121, 251, 0.1);
    padding-right: 5px;
    .left-cont {
      .icon {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: linear-gradient(180deg, #3cb1fd 0%, #1c79fb 100%);
        border-radius: 50%;
        margin: 0 9px;
        position: relative;
        top: -2px;
      }
      .left-cont-title {
        font-size: 22px;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #ffffff;
        display: inline-block;
      }
    }
    .right-cont {
      font-size: 16px;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #87bcff;
      .icon {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: linear-gradient(180deg, #3cb1fd 0%, #1c79fb 100%);
        border-radius: 50%;
        margin: 0 9px;
        position: relative;
        top: -2px;
      }
      .lf-btn {
        cursor: pointer;
        display: inline-block;
        position: relative;
        &:hover {
          color: rgba(135, 188, 255, 0.88);
        }
        &.active {
          &::after {
            content: "";
            z-index: 99;
            left: 0;
            bottom: -6px;
            height: 2px;
            width: 100%;
            position: absolute;
            background-color: #87bcff;
            border-radius: 2px;
          }
        }
      }
    }
  }

  .body-cont {
    flex: 1;
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
    .body-left {
      height: 100%;
      width: 209px;
      padding-top: 60px;
      box-sizing: border-box;
      height: 269px;
    }
    .body-right {
      flex: 1;
      .mySwiper {
        width: 415px;
        height: 268px;
        .yunli-chart-cont {
          width: 207px;
          height: 268px;
          display: flex;
          flex-direction: column;
          .yunli-chart-item {
            height: 50%;
          }
        }
      }
    }
  }
}
</style>
